import React from 'react';
import { observable, autorun, action } from 'mobx';

import styles from './products.css';
import ProductList from '../../components/ProductList';
import ProductListHookVersion from '../../components/ProductListHookVersion';
import UseReducerAndImmer from '../../components/UseReducerAndImmer';

const productList = observable([{ name: 'vue' }, { name: 'react' }]);

autorun(() => {
  console.log('Products left: ' + productList.length);
});

const productListHookVersion = [{ name: 'vue' }, { name: 'react' }];

function onDelete(productId: string) {
  const idx = productList.findIndex(v => v.name === productId);
  productList.splice(idx, 1);
}

export default function products() {
  const i = 2;
  return (
    <div className={styles.normal}>
      <h1>Page products</h1>
      {undefined && <ProductList products={productList} onDelete={onDelete} />}
      {i === 1 && <ProductListHookVersion products={productListHookVersion} />}
      {i === 2 && <UseReducerAndImmer products={productListHookVersion} />}
    </div>
  );
}
